<script setup lang='ts'>
import { getArticleDetailAPI, publishArticleAPI, uploadAPI } from '@/apis';
import GetChannels from '@/components/GetChannels.vue';
import type { PublishArticleParams } from '@/types';
import { ArrowRight, Plus } from '@element-plus/icons-vue';
import { ElMessage, type UploadFile, type UploadRequestOptions, type UploadUserFile } from 'element-plus';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const publishParams = ref<PublishArticleParams>({
  title: '',
  content: '',
  cover: {
    type: 1, // 封面类型 -1:自动，0-无图，1-1张，3-3张
    images: []
  },
  channel_id: 0,
})

const httpRequest = async (options: UploadRequestOptions) => {
  const fd = new FormData()
  fd.append('image', options.file)
  const res = await uploadAPI(fd)
  // console.log(res.data.url);
  publishParams.value.cover.images.push(res.data.url)
  return res.data.url
}

// 发表文章publishArticleAPI
const router = useRouter()
const onSubmit = async (draft: boolean) => {
  // 将QuillEditor内容转换为纯文本
  publishParams.value.content = JSON.stringify(publishParams.value.content)
  await publishArticleAPI(publishParams.value, draft)
  ElMessage.success(draft ? '保存草稿成功' : '发表成功')
  router.push('/article')
}
// 编辑文章
const fileList = ref<UploadUserFile[]>([])
const route = useRoute()
if (route.params.id) {
  getArticleDetailAPI(route.params.id as string).then((res) => {
    console.log(res);
    publishParams.value = res.data
    fileList.value = publishParams.value.cover.images.map(item => ({
      url: item,
      name: '',
    }))
    // publishParams.value.content = JSON.parse(publishParams.value.content)
  })
}
// 删除图片时,把表单的数据也删除
const removeUpload = (uploadFile: UploadFile) => {
  console.log(uploadFile);
  publishParams.value.cover.images = publishParams.value.cover.images.filter(item => item !== uploadFile.response)
}
// 切换单选按钮时,清空图片类表

</script>

<template>
  <el-scrollbar height="580px">
    <el-card>

      <template #header>
        <el-breadcrumb :separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>发布文章</el-breadcrumb-item>
        </el-breadcrumb>
      </template>

      <el-form label-width="80px" :model="publishParams">
        <el-form-item label="标题:">
          <el-input placeholder="请输入文章标题" v-model="publishParams.title" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="频道:">
          <GetChannels v-model:channel_id="publishParams.channel_id"></GetChannels>
        </el-form-item>

        <el-form-item label="封面:" class="cover">
          <div>
            <el-radio-group size="large" v-model="publishParams.cover.type" @change="radioChange">
              <el-radio-button label="单图" :value="1" />
              <el-radio-button label="三图" :value="3" />
              <el-radio-button label="无图" :value="0" />
            </el-radio-group>
            <el-upload v-if="publishParams.cover.type !== 0" list-type="picture-card" style="margin-top: 15px;"
              :http-request="httpRequest" :limit="publishParams.cover.type" v-model:file-list="fileList"
              :on-remove="removeUpload">
              <el-icon>
                <Plus />
              </el-icon>
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item label="内容:" style="width:750px;height:200px; margin-bottom: 50px;">
          <QuillEditor ref="quillRef" theme="snow" toolbar="full" placeholder="请输入内容" style="width:750px;height: 150px;"
            v-model:content="publishParams.content" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit(false)">发布文章</el-button>
          <el-button @click="onSubmit(true)">存入草稿</el-button>
        </el-form-item>
      </el-form>

    </el-card>
    {{ publishParams }}
  </el-scrollbar>
</template>

<style scoped></style>
